<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>
</head>
<body>
    <div id="app">
        官方网站：
        <a href="https://router.vuejs.org/zh/api/#exact-active-class">
            https://router.vuejs.org/zh/api/#exact-active-class
        </a>

        <br>
        <!-- 跳转到/login,router-link默认渲染为一个a标签 -->
        <router-link to="/index">跳转到首页</router-link>
        <router-view></router-view>

    </div>

    <template id="childrenTemplate">
        <div>
            <router-link to="/index/login">跳转到登陆</router-link>
            <router-link to="/index/register">跳转到注册</router-link>

            <router-view></router-view>
        </div>

    </template>

    <template id="loginTemplate">
        <div>
            登陆组件的模板
        </div>
    </template>

    <template id="registerTemplate">
        <div>
            注册组件的模板
        </div>
    </template>

    <script>
        var myTemplate = Vue.component('login',{
            template:"#loginTemplate",
            /**
             * 1.当路由到该组件时，可以通过this.$route获取参数
             */
            created(){
                console.log( this.$route)
                console.log(this.$route.params)
            }
        })

        var registerTemplate = Vue.component('register',{
            template: "#registerTemplate",
            created(){
                console.log("注册模板")
                console.log(this.$route.params)
            }
        })

        var childrenTemplate = Vue.component('childrenTemplate',{
            template:"#childrenTemplate"
        })


        /**
         * 1.创建一个路由对象，当导入vue-router包之后，在window全局对象中，就有一个路由的构造函数，叫VueRouter
         */

        var router = new VueRouter({
            //这个配置对象中的route表示：路由匹配规则
            routes:[
                {
                    path:'/index',
                    component:childrenTemplate,
                    children:[
                        /**
                         * 注意：path不加'/'代表的是，/index/login,就能和route-link匹配上
                         * 如果加了'/'(即：/login)就是绝对路径，因此route-link也会修改，改成/login
                         */
                        { path:'login',component: myTemplate },
                        { path:'register',component: registerTemplate }

                    ]
                }
            ]
        })

        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{},
            /**
             * 2.将路由规则对象注册到vm实例上
             */
            router:router
        })
    </script>
</body>
</html>